<template>
  <div class="discoveryCon">
    <!-- 左边 -->
    <div class="leftBox">
      <div :class="['leftItem', leftIndex===index ? 'active' : '']"
           v-for="(item, index) in cateArr" :key="item.id" @click="changeLeftNav(index)">
        {{item.title}}
      </div>
    </div>

    <!-- 中间 -->
    <div class="middleBox"  v-infinite-scroll="getMore" :infinite-scroll-disabled="disabled">
      <div class="midTitle">全部为天猫宝贝！点击原价，可以查看淘宝价格哦！</div>
      <div class="midItemBox"  v-for="(item, index) in discoveryArr" :key="item.category_id + '' + index">
        <el-image class="image" :src="item.pict_url" :lazy="true" fit="fill"></el-image>
        <div class="infoCon">
          <div class="title">{{item.title}}</div>
          <div class="priceBox">
            <span class="oldPrice">原价：{{item.zk_final_price}}￥</span>
            <span class="nowPrice">原价：{{item.coupon_start_fee}}￥</span>
          </div>
          <div class="btnBox">
            <span class="peopleNum">{{item.coupon_remain_count}} · 人已购买</span>
            <el-button type="danger" size="mini">粉丝购买福利</el-button>
          </div>
        </div>
      </div>
      <p class="tipMsg" v-if="loading">加载中...</p>
      <p class="tipMsg" v-if="noMore">没有更多了</p>
    </div>

    <!-- 右边 -->
    <div class="rightBox">
      <el-carousel class="carousel" trigger="click" height="250px" indicator-position="none">
        <el-carousel-item v-for="(item, index) in loopArr" :key="item.category_id + '' + index">
          <img :src="item.pict_url" alt="图片" class="image">
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  import {mapMutations} from "vuex";
  export default {
    name: "index",
    data(){
      return {
        leftIndex: 0,
        loading: false,
        pageNum: 2,
        noMore: false,
      }
    },

    computed: {
      disabled () {
        return this.loading || this.noMore
      }
    },

    async asyncData({$axios}){
      let res = await $axios("/api/discovery/categories");
      let cateArr, discoveryArr, loopArr = [];
      if(res.code === 10000) {
        cateArr = res.data;

        let materialId = cateArr[0].id;
        let res2 = await $axios(`/api/discovery/${materialId}/1`);
        if(res2.code === 10000){
          discoveryArr = res2.data;
          loopArr = discoveryArr.slice(0, 5)
        }
      }

      return {
        cateArr,
        discoveryArr,
        loopArr,
      }
    },

    mounted(){
      this.changeNav(1)
    },

    methods: {
      ...mapMutations(['changeNav']),

      changeLeftNav(index){
        this.leftIndex = index;
        this.loading = false;
        this.pageNum = 2;
        this.noMore = false;
        this.discoveryArr = [];

        this.getMore()
      },

      // 上拉加载更多
      async getMore() {
        let {leftIndex, cateArr, pageNum, loading, noMore} = this;
        if(loading || noMore) return;
        this.loading = true;

        let materialId = cateArr[leftIndex].id;
        let res = await this.$axios(`/api/discovery/${materialId}/${pageNum}`);
        if(res.code === 10000){
          this.discoveryArr.push(...res.data);
          this.pageNum += 1;
          if(res.data.length === 0) {
            this.noMore = true
          }
        }
        this.loading = false
      }
    }

  }
</script>

<style scoped lang="scss">
  .discoveryCon{
    display: flex;
    margin: 20px 0;

    .leftBox{
      width: 150px;

      .leftItem{
        text-align: center;
        line-height: 40px;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;

        &:first-child{
          border-top: 1px solid #eee;
        }
        &:last-child{
          border-bottom: 1px solid #eee;
        }


        &:hover{
          background-color: red;
          color: #fff;
        }
      }

      .active{
        background-color: red;
        color: #fff;
      }
    }

    .middleBox{
      flex: 1;

      .midTitle{
        text-align: center;
        line-height: 40px;
        background-color: dodgerblue;
        color: #fff;
        margin: 0 10px;
      }

      .midItemBox{
        box-shadow: 0 0 4px #ccc;
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
        display: flex;

        .image{
          width: 100px;
          height: 100px;
          margin-right: 20px;
        }

        .infoCon{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;

          .priceBox{
            font-size: 14px;
            display: flex;
            .oldPrice{
              text-decoration: line-through;
              width: 100px;
              font-size: 12px;
            }

            .nowPrice{
              font-weight: 900;
              color: red
            }
          }

          .btnBox{
            display: flex;
            justify-content: space-between;
            .peopleNum{
              font-size: 12px;
            }
          }
        }
      }

      .tipMsg{
        text-align: center;
        padding: 10px 0;
      }
    }

    .rightBox{
      width: 250px;
      .carousel{
        box-shadow: 0 0 4px #999;
        .image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
